﻿<style>

.col22 
{
	padding-top: 20px;
    width: 200px;
}
.col33
{
	padding-top: 20px;
    width: 110px;
}
.col44 {
    padding-top: 20px;
    width: 150px;
}
.col55 {
    padding-top: 15px;
    width: 70px;
}
.col66 {
    padding-top: 20px;
    width: 200px;
}

.col77 {
    padding-top: 15px;
    width: 110px;
}

.col88 {
    padding-top: 15px;
    width: 70px;
}

.col_cor {
	color:blue;
}


.col2_2 
{
    width: 200px;
}
.col3_3 
{

    width: 100px;
}
.col4_4 {

    width: 120px;
}
.col5_5 {
 
    width: 120px;
}

.cart_table_title_clone {
    background: none repeat scroll 0 0 #f4f4f4;
    font-weight: bold;
    line-height: 35px;
}

.cart_table_title_clone2 {
    background: none repeat scroll 0 0 #f4f4f4;
}

</style>
	 

<section class=" fl" style="margin: 0 auto;width: 1000px;">
	<div class="cartStep1 cartStep" style="margin-top: 10px;">
		<div class="regis_box_title">Hoàn tất Đơn Hàng</div>
		
		
		
		
		
		<div class="fr">
			<input id="btnSearch_order" class="btn fr" type="image" onclick="postSearchOrder()" src="../../Content/images/search_btn.png">
			<input id="search_order" class="formtip fr" type="text" onfocus="onFocus(this)" onblur="onBlur(this)" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch_order').click();" value="Tìm kiếm" name="searchKey">
			<div class="clr"></div>
			<div id="searchResult" class="searchResult"> </div>
		</div>

		
		<div class="fr" id="order_search_des" style="margin-top: 20px;"><h2>Tìm với từ khóa: <span id="order_search_key"></span></h2></div>
		<div class="cart_table" style="margin-top: 60px">
			<div class="cart_table_title">
				<div class="fl col col22 col_cor" style="padding-top: 20px;">Tên KH</div>
				<div class="fl col col33 col_cor" style="padding-top: 20px;">SDT</div>
				<div class="fl col col33 col_cor" style="padding-top: 20px;">Tổn Tiền</div>
				<div class="fl col col44 col_cor" style="padding-top: 20px;">Ngày tạo</div>
				<div class="fl col col44 col_cor" style="padding-top: 20px;">Trạng thái</div>
				<div class="clr"></div>
			</div>
			<div  data-bind="foreach: Orders">
				<div class="cart_table_line cartItemDetail" style="border:1px solid #CCCCCC;  background: #DAE3E2">				
					<div class="fl col col22">
						<b><span data-bind="text:CustomerName" style="font-weight:normal "></span></b>
					</div>
					
					<div class="fl col col33">
						<span data-bind="text : CustomerPhone"></span> 
					</div>
					
					<div class="fl col col33">
						<span data-bind="text : Total"></span>
					</div>
					
					<div class="fl col col44">
						<span data-bind="text : DateCreated"></span>
					</div>
					
					<div class="fl col col44">
						<span data-bind="text : Status"></span>
					</div>
	
					<div class="clr"></div>
					
					<div class="cart_table">
						<div class="cart_table_title_clone">
							<div class="fr col col5_5">Thành Tiền</div>
							<div class="fr col col4_4">Giá</div>
							<div class="fr col col3_3">Số lượng</div>
							<div class="fr col col2_2">Sản phẩm</div>
							
							<div class="clr"></div>
						</div>
							<div  data-bind="foreach: OrderDetail">
								<div class="cart_table_title_clone2">
									<div class=" cartItemDetail">
										<div class="fr col col5_5">
											<span data-bind="text : SubTotal"></span>
										</div>

											
										<div class="fr col col4_4">
											<span data-bind="text : UnitCost"></span>
										</div>

					
										<div class="fr col col3_3">
											<span data-bind="text : Quantity"></span> 
										</div>


										<div class="fr col col2_2">
											<b><span data-bind="text:Name" style="font-weight:normal "></span></b>
										</div>

									</div>
									<div class="clr"></div>
								</div>

							</div>
					</div>
				@*<div class="cart_line"></div>*@
				</div>
			</div>
			
		</div>
	</div>
</div>

</section>

<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../Scripts/Models/User.js" type="text/javascript"></script>
<script type="text/javascript">

	function Shiper(data) {
		this.UserID = data.UserID;
		this.Name = data.Name;
	}

	function OrderDetail(data) {
		this.ProductId = data.ProductId;
		this.Name = data.Product.Name;
		this.Quantity = data.Quantity;
		this.UnitCost = data.UnitCost;
		this.SubTotal = data.SubTotal;
	}

	function Order(data) {
		this.Id = data.Id;
		this.CustomerName = data.CustomerName;
		this.CustomerPhone = data.CustomerPhone;
		var trangthai = data.Status;
		if (trangthai == '1')
			trangthai = 'Chờ Duyệt';
		else if (trangthai == '2')
			trangthai = 'Đã Duyệt';
		if (trangthai == '3')
			trangthai = 'Hoàn tất';
		this.Status = trangthai;
		this.Total = data.Total;
		var createDay = new Date(data.DateCreated);
		this.DateCreated = formatDate(createDay, 4);
		this.SellerID = data.SellerID;
		this.ShippingInfo = data.ShippingInfo;
		this.OrderDetail = $.map(data.OrderDetails, function (item) { return new OrderDetail(item); });
	}

	function CheckOrderModel() {
		// Data
		var self = this;
		self.Orders = ko.observableArray();
		$.getJSON("/api/products/GetOrder", function (allData) {
			var mappedUsers = $.map(allData, function (item) { return new Order(item); });
			self.Orders(mappedUsers);
		});

		self.search = function(id) {
			$.getJSON("/api/products/GetOrderSearch/" + id, function (allData) {
				var mappedUsers = $.map(allData, function (item) { return new Order(item); });
				self.Orders(mappedUsers);
			});
		};

	};

	var view_model = new CheckOrderModel();
	ko.applyBindings(view_model);

	function postSearchOrder() {
		var data = $('#search_order').val();
		view_model.search(data);
		$("#order_search_des").show();
		$("#order_search_key").text(data);
	}

	$("#order_search_des").hide();
	

</script>